<template>
  <div>
    <div  @click="handleClick"  :style="{ cursor: 'pointer', backgroundColor: opername === '' ? 'lightgray' : 'green' }"  >
        登录人：{{ opername }}
    </div>
    <DlgLogin :dialog-visible="isShowLogin"  @res-login="handleResultLogin"></DlgLogin>
  </div>
  
</template>

<script>
import { ElMessageBox } from 'element-plus';
import { mapState } from 'vuex'
import DlgLogin from './DlgLogin9000.vue';

export default {
  name: 'ZoneLogin',
  components: {
    DlgLogin
  },

  data() {
    return {
      isShowLogin : false ,
    }
  },

  created() {
  },

  mounted() {

  },

  unmounted() {

  },
  computed:{
    ...mapState([
        'opername',
        'operpower',
    ]),
  },  

  methods: {
    handleClick() {
      if (this.opername !== '') {
        // 已登录，弹出确认框
        ElMessageBox.confirm(
          '确定要退出登录吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        ).then(() => {
          // 用户点击确定，执行退出登录操作
          this.$store.commit('setOperName', '');
          this.$store.commit('setOperPower', -1 );
        }).catch(() => {
          // 用户点击取消，不做处理
        });
      } else {
        // 未登录，显示登录窗口
        this.isShowLogin = true;
      }
    },
    handleResultLogin( res ){
      this.isShowLogin = false;
    },
  }
}
</script>

<style scoped>
</style>

